﻿@model SevenSpikes.Nop.Plugins.QuickView.Models.QuickViewProductPageModel
@if (Model.QuickViewSettings.EnableCloudZoom && Model.ProductDetails.DefaultPictureModel.CustomProperties.ContainsKey("SmallImageUrl"))
{
    const string defaultRelation = "position: 'inside', smoothMove: 3, showTitle: 'False', titleOpacity: 0";
    const string galleryRelation = "position: 'inside', smoothMove: 3, showTitle: 'False', titleOpacity: 0,  useZoom: 'zoom1', smallImage: '{0}'";

    var defaultSmallImageUrl = Model.ProductDetails.DefaultPictureModel.CustomProperties["SmallImageUrl"].ToString();

    <div class="picture">
        <a href="@Model.ProductDetails.DefaultPictureModel.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@defaultRelation">
            <img src="@defaultSmallImageUrl" alt="@Model.ProductDetails.DefaultPictureModel.AlternateText" title="@Model.ProductDetails.DefaultPictureModel.Title" id="cloudZoomImage" />
        </a>
    </div>

    if (Model.ProductDetails.PictureModels.Count > 1)
    {
    <div class="thumbnails">
        @foreach (var picture in Model.ProductDetails.PictureModels)
        {
            var smallImageUrl = "";
            if (picture.CustomProperties.ContainsKey("SmallImageUrl"))
            {
                smallImageUrl = picture.CustomProperties["SmallImageUrl"].ToString();
            }

            var tinyImateUrl = "";

            if (picture.CustomProperties.ContainsKey("TinyImageUrl"))
            {
                tinyImateUrl = picture.CustomProperties["TinyImageUrl"].ToString();
            }

            <a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@String.Format(galleryRelation, smallImageUrl)">
                <img class="cloud-zoom-gallery-img" src="@tinyImateUrl" alt="@picture.AlternateText" title="@picture.Title" />
            </a>
        }
    </div>
    }
}
else
{
    <div class="picture">
        <img alt="@Model.ProductDetails.DefaultPictureModel.AlternateText" src="@Model.ProductDetails.DefaultPictureModel.ImageUrl" />
    </div>
    if (Model.ProductDetails.PictureModels.Count > 1)
    {
    <div class="thumbnails">

        @foreach (var picture in Model.ProductDetails.PictureModels)
        {
            <img src="@picture.ImageUrl" alt="@picture.AlternateText" />
        }

    </div>
    }
}
